<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>自营订单</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 会员列表 -->
            <div class="userlist">
              <div class="status_box">
                <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间"  format="yyyy 年 MM 月 dd 日" value-format="timestamp" @change="getTime()" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                <div class="status" style="width: 188px;">
                  <el-select v-model="value1" placeholder="设备ID" @change="selectChanged()">
                    <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">{{item.id}}/{{item.name}}</el-option>
                  </el-select>
                </div>
                <div class="status status2">
                  <el-select v-model="value2" placeholder="车牌号">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <div class="input" @keyup.enter="findProduct()"><el-input v-model="user_id" clearable></el-input></div>
                <div class="search"><el-button @click="findProduct()">搜索</el-button></div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="deviceId" label="设备ID" width="80"></el-table-column>
                  <el-table-column prop="tradeIdReps" label="订单号" width="200"></el-table-column>
                  <el-table-column prop="duration" label="累计时长" width="150">
                    <template slot-scope="scope">
                      <span>{{scope.row.duration}}分钟</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="licence" label="车牌号" width="150"></el-table-column>
                  <el-table-column prop="userMobile" label="会员信息" width="200">
                    <template slot-scope="scope">
                      <span>{{scope.row.userName}}/{{scope.row.phoneNumber}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deviceAddress" label="设备地址" width="350"></el-table-column>
                  <el-table-column label="实付款" width="100">
                    <template slot-scope="scope">
                        <p style="color: red;">{{scope.row.money}}元</p>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column prop="startTime" :formatter="dateForma" label="创建时间" width="200" sortable></el-table-column>
                  <el-table-column prop="endTime" :formatter="dateForma" label="结束时间" width="200" sortable></el-table-column>
                  <el-table-column label="操作" fixed="right" align="center">
                    <template slot-scope="scope">
                      <el-button @click="goToOrdersCenterDetails(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10,20,30,40,50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'
  export default {
    name: 'Orders',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 50,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        // 订单号/子订单号/电话号码
        id: '',//订单id
        time:null,//时间段
        startTime:null,//开始时间
        endTime:null,//结束时间
        value1:'',//设备id
        options1: [],//设备id列表
        user_id: null,//会员id
        value2:'car_id',//车牌号
        options2: [{
          value: 'car_id',
          label: '车牌号',
        },{
          value: 'user_id',
          label: '会员ID',
        },{
          value: 'user_phone',
          label: '会员手机号',
        }],
        tableData: [{}], // 订单表格
        multipleSelection: [], // 选择后的列表
        startDate:null,//订单创建时间
        endDate:null,//订单结束时间
      }
    },
    mounted() {
      this.getAllDevice();
      this.findProduct();
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      //根据时间段查找
      getTime(){
        console.log(this.time)
        if(this.time==null){
          this.startTime = null
          this.endTime = null
        }else{
          this.startTime = this.time[0]
          this.endTime = this.time[1]
        }
        this.findProduct();
      },
      //查询
      findProduct(){
        var carId = null;//车牌号
        var userId = null;//会员id
        var userPhone = null;//会员手机号码
        if(this.value2=="car_id"){//车牌号
          carId = this.user_id;
          console.log("车牌号:",carId);
        }else if(this.value2=="user_id"){//会员id
          userId = this.user_id;
          console.log("会员id:",userId);
        }else if(this.value2=="user_phone"){//会员手机号码
          userPhone = this.user_id;
          console.log("会员手机号码:",userPhone);
        }
        this.$axios.post(this.baseURL+'order',{
          "deviceId":this.value1,//设备id
          "phoneNumber":userPhone,//会员手机号码
          "userId":userId,//会员id
          "licence":carId,//车牌号
          "page": this.page,
          "pageSize":this.pageSize,
          "requestSource":"PC",
          "startTimes":this.startTime,
          "endTimes":this.endTime
        }).then((res)=>{
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //获取设备列表
      getAllDevice(){
        this.$axios.post(this.baseURL+'device',{
        }).then((res)=>{
          if(res.data.code==1){
            this.options1 =res.data.data.records;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //选择设备
      selectChanged(){
        console.log("设备id："+this.value1);
        this.findProduct()
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findProduct();// 所有订单列表
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findProduct();// 所有订单列表
      },
      // 查看订单详情
      goToOrdersCenterDetails(row){
        var data = row.id;
        this.$router.push({
          path: '/OrdersDetails',
          query: {
            data: data,
          }
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .search{
    >>> .el-button{
      background-color: #ff5733!important;
    }
  }
  // 修改表格状态栏颜色
  .product_name,
  .found_time{
    width: 250px;
    display: flex;
    line-height: 40px;
    justify-content: flex-start;
    margin-left: 10px;
    span{
      display: inline-block;
      line-height: 50px;
    }
    >>> input{
      margin-left: 0!important;
    }
  }
  .found_time{
    width: 550px;
    >>> .el-input__inner{
      height: 35px;
      line-height: 35px;
      margin-top: 5px;
    }
  }
  .search{
    margin-top: 5px!important;
  }
  .itemText{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    display: block;
    color:#409EFF;
  }
  //嵌套表格样式
  .childTable{
    width: 100%;
    min-height: 50px;
    border-bottom: 1px solid #EBEEF5;
    tr{
      background-color: transparent!important;
      td{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        border: none;
        line-height: 20px;
        color: #606266;
      }
    }
    .childTableTr{
      td{
        color: #409eff;
      }
    }
  }
  .childTable:last-child{
    border-bottom: none;
  }
  >>> .el-table td{
    padding: 0!important;
  }
  >>> .el-table .cell{
    padding: 0 10px;
  }
  >>> .el-range-editor{
    margin-top: 7px;
    height: 35px;
    margin-right: 10px;
  }
</style>
